<template>
    <div class="order">
        <Header title="订单" />
        <div class="content">
            <van-tabs>
                <van-tab v-for="(item, index) in TabData" :key="index" :title="item">
                    <div v-if="item === '全部'&& store.state.oderListed.length">
                        <van-card v-for="(items, inx) in store.state.oderListed" :key="inx" :num="items.num"
                            :price="items.price" :title="items.title" :thumb="items.pic" />
                    </div>
                    <Blink v-else />
                </van-tab>
            </van-tabs>
        </div>
        <Footer></Footer>
    </div>
</template>
<script >
import { defineComponent, toRefs, reactive } from 'vue';
import Footer from '../../components/Footer.vue';
import Header from '../../components/Store_header.vue';
import Blink from '../../components/Blank.vue';
import { useStore } from 'vuex';
export default defineComponent({
    name: 'order',
    components: {
        Footer,
        Header,
        Blink
    },
    setup() {
        const store = useStore();
        const data = reactive({
            TabData: ['全部', '交易完成', '代付款', '待发货', '已发货']
        })
        return {
            store,
            ...toRefs(data)

        }
    }

})
</script>
<style lang="less" scoped>
.order {
    display: flex;
    flex-flow: column;
    height: 100%;

    .content {
        flex: 1;
        overflow-y: auto;
    }
}
</style>